<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>七牛云 &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2021. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>七牛云</h1>
  <time datetime=2020-06-01T11:32:40&#43;0800 class="post-date">Mon, Jun 1, 2020</time>
  <p><strong>1、七牛云上传django端</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e"># 导包</span>
<span style="color:#f92672">from</span> qiniu <span style="color:#f92672">import</span> Auth

<span style="color:#75715e"># 定义七牛云存储接口</span>
<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">QiNiu</span>(APIView):

	<span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self,request):
		
		<span style="color:#75715e"># 定义密钥</span>
		q <span style="color:#f92672">=</span> Auth(<span style="color:#e6db74">&#39;5Veq6sNOg8ka1d9uIeOS3Wazb7AESwvrBbCsdJWi&#39;</span>,
		         <span style="color:#e6db74">&#39;_8g1em1f0XJ-Ge4AoxZhNSc3p1HnqvhqFuC6UNcJ&#39;</span>)
		
		<span style="color:#75715e"># 指定上传空间</span>
		token <span style="color:#f92672">=</span> q<span style="color:#f92672">.</span>upload_token(<span style="color:#e6db74">&#39;1906md&#39;</span>)

		<span style="color:#66d9ef">print</span>(token)

		res <span style="color:#f92672">=</span> {}
		res[<span style="color:#e6db74">&#39;token&#39;</span>] <span style="color:#f92672">=</span> token

		<span style="color:#66d9ef">return</span> Response(res)
</code></pre></div><p><strong>2、vue端template中上传框定义</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">tr</span>&gt;
    &lt;<span style="color:#f92672">td</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;padding:5px;&#34;</span>&gt;

        <span style="color:#a6e22e">七牛云上传</span><span style="color:#f92672">:</span>

    &lt;/<span style="color:#f92672">td</span>&gt;
    &lt;<span style="color:#f92672">td</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;padding:5px;&#34;</span>&gt;

        &lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;file&#34;</span> <span style="color:#f92672">@change</span><span style="color:#e6db74">=&#34;upload_qiniu&#34;</span> /&gt;

    &lt;/<span style="color:#f92672">td</span>&gt;
&lt;/<span style="color:#f92672">tr</span>&gt;



&lt;<span style="color:#f92672">tr</span>&gt;
    &lt;<span style="color:#f92672">td</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;padding:5px;&#34;</span>&gt;

        <span style="color:#a6e22e">进度展示</span><span style="color:#f92672">:</span>

    &lt;/<span style="color:#f92672">td</span>&gt;
    &lt;<span style="color:#f92672">td</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;padding:5px;&#34;</span>&gt;

        {{ <span style="color:#a6e22e">loadpercent</span> }}

        &lt;<span style="color:#f92672">Progress</span> <span style="color:#f92672">v-show</span><span style="color:#e6db74">=&#34;loadpercent_int&#34; :percent=&#34;loadpercent_int&#34; color=&#34;blue&#34;&gt;&lt;span slot=&#34;title&#34;&gt;&lt;/span&gt;&lt;span slot=&#34;text&#34;</span>&gt;{{ <span style="color:#a6e22e">loadpercent_int</span> }}<span style="color:#960050;background-color:#1e0010">%</span>&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">Progress</span>&gt;

    &lt;/<span style="color:#f92672">td</span>&gt;
&lt;/<span style="color:#f92672">tr</span>&gt;
</code></pre></div><p><strong>3、data中定义七牛云上传凭证</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">//   七牛上传凭证
</span><span style="color:#75715e"></span><span style="color:#a6e22e">uptoken</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>,
<span style="color:#75715e">//   进度
</span><span style="color:#75715e"></span><span style="color:#a6e22e">loadpercent</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>,
</code></pre></div><p><strong>4、methods中获取七牛云凭证</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">// 获取七牛凭证
</span><span style="color:#75715e"></span><span style="color:#a6e22e">get_uptoken</span>(){

    <span style="color:#75715e">//发送请求
</span><span style="color:#75715e"></span>    <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#39;http://localhost:8000/uptoken/&#39;</span>).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">result</span>) =&gt;{

    	<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">result</span>);

        <span style="color:#75715e">//赋值操纵
</span><span style="color:#75715e"></span>        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">uptoken</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">token</span>;

	});
},
</code></pre></div><p><strong>5、methods中上传到七牛云</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">	<span style="color:#75715e">//   上传七牛云
</span><span style="color:#75715e"></span>	<span style="color:#a6e22e">upload_qiniu</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">e</span>){
		<span style="color:#75715e">// console.log()
</span><span style="color:#75715e"></span>
		<span style="color:#75715e">//获取文件对象
</span><span style="color:#75715e"></span>		<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">file</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">target</span>.<span style="color:#a6e22e">files</span>[<span style="color:#ae81ff">0</span>];
		
		<span style="color:#75715e">//声明参数
</span><span style="color:#75715e"></span>  		<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">param</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">FormData</span>();

		<span style="color:#75715e">// 将上传凭证添加参数
</span><span style="color:#75715e"></span>		<span style="color:#a6e22e">param</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;token&#39;</span>,<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">uptoken</span>);

		<span style="color:#75715e">// 附加文件
</span><span style="color:#75715e"></span>		<span style="color:#a6e22e">param</span>.<span style="color:#a6e22e">append</span>(<span style="color:#e6db74">&#39;file&#39;</span>,<span style="color:#a6e22e">file</span>);

		<span style="color:#75715e">// 定制化axios请求
</span><span style="color:#75715e"></span>		<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">axios_qiniu</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">create</span>({<span style="color:#a6e22e">withCredentials</span><span style="color:#f92672">:</span><span style="color:#66d9ef">false</span>});

		<span style="color:#75715e">// 发送请求
</span><span style="color:#75715e"></span>		<span style="color:#a6e22e">axios_qiniu</span>({

			<span style="color:#a6e22e">method</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;POST&#39;</span>,
			<span style="color:#a6e22e">url</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;http://up-z1.qiniu.com/&#39;</span>,
			<span style="color:#a6e22e">data</span><span style="color:#f92672">:</span><span style="color:#a6e22e">param</span>,
			<span style="color:#a6e22e">timeout</span><span style="color:#f92672">:</span><span style="color:#ae81ff">30000</span>,
			<span style="color:#75715e">//设置上传进度
</span><span style="color:#75715e"></span>  			<span style="color:#a6e22e">onUploadProgress</span><span style="color:#f92672">:</span>(<span style="color:#a6e22e">e</span>) =&gt; {

  				<span style="color:#75715e">//设置总进度对象  已上传字节数 / 总字节数
</span><span style="color:#75715e"></span>  				<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">complete</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">loaded</span> <span style="color:#f92672">/</span> <span style="color:#a6e22e">e</span>.<span style="color:#a6e22e">total</span>);

  				<span style="color:#75715e">//安慰剂按钮
</span><span style="color:#75715e"></span>  				<span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">complete</span> <span style="color:#f92672">&lt;</span> <span style="color:#ae81ff">1</span>){
  					<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">loadpercent</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">complete</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">100</span>).<span style="color:#a6e22e">toFixed</span>(<span style="color:#ae81ff">2</span>) <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;%&#34;</span>;

  					<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">loadpercent_int</span> <span style="color:#f92672">=</span> parseInt((<span style="color:#a6e22e">complete</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">100</span>).<span style="color:#a6e22e">toFixed</span>(<span style="color:#ae81ff">2</span>));
  				}

  			}

		}).<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">result</span> =&gt;{

			<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">result</span>);
			<span style="color:#75715e">// 赋值 图片
</span><span style="color:#75715e"></span>			<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">src</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;http://q79iv9k3k.bkt.clouddn.com/&#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">key</span>;

			<span style="color:#75715e">// 视频
</span><span style="color:#75715e"></span>			<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">videosrc</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;http://q79iv9k3k.bkt.clouddn.com/&#39;</span><span style="color:#f92672">+</span><span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">key</span>;
			
			
			  
			<span style="color:#75715e">//发送请求
</span><span style="color:#75715e"></span>			<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#39;http://localhost:8000/updateuser/&#39;</span>,{<span style="color:#a6e22e">params</span><span style="color:#f92672">:</span>{<span style="color:#a6e22e">uid</span><span style="color:#f92672">:</span><span style="color:#a6e22e">localStorage</span>.<span style="color:#a6e22e">getItem</span>(<span style="color:#e6db74">&#39;uid&#39;</span>),<span style="color:#a6e22e">img</span><span style="color:#f92672">:</span><span style="color:#a6e22e">result</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">key</span>}}).<span style="color:#a6e22e">then</span>((<span style="color:#a6e22e">result</span>) =&gt;{

							<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">result</span>);

							
			});
			<span style="color:#75715e">//上传成功后，强行100%
</span><span style="color:#75715e"></span>  			<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">loadpercent</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;100%&#39;</span>;
			<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">loadpercent_int</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">100</span>;
		});
	},
</code></pre></div>
</div>


    </main>

    
  </body>
</html>
